<template>
  <section class="order">
    <el-col :span="24" class="action-bar">
		<span class="task-form-text">订单编号：</span>
      	<el-input class="action-bar-input" placeholder="输入订单号"></el-input>
		<el-button type="primary" size="medium">搜索</el-button>
    </el-col>
    <!--列表-->
		<el-table :data="users" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="name" label="订单编号" width="120"/>
			<el-table-column prop="sex" label="是否支付" width="100"/>
			<el-table-column prop="age" label="支付时间" width="100"/>
			<el-table-column prop="birth" label="支付方式" width="120"/>
			<el-table-column prop="addr" label="所属店铺" width="180"/>
      <el-table-column prop="addr" label="数量" width="180"/>
      <el-table-column prop="addr" label="订单金额" width="180"/>
      <el-table-column prop="addr" label="订单状态" width="180"/>
			<el-table-column label="操作" width="250">
				<el-button type="danger" size="mini" @click="editor">删除</el-button>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code"><el-pagination background layout="prev, pager, next" :total="50"></el-pagination></div>
    </el-col>

  </section>
</template>

<script>
export default {
	data(){
		return {
			users:[
				{name:'周杰伦',sex:'男',age:'18',birth:'1990-05-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'ff',sex:'男',age:'18',birth:'1994-04-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'ggg',sex:'男',age:'18',birth:'1993-03-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'gggg',sex:'男',age:'18',birth:'1992-02-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'}
      ],
      dialogVisible:'',//编辑状态的弹窗
      searchType:'',//筛选的状态
      searchTypeOptions:[
        {value:'全部'},
        {value:'已缴费'},
        {value:'未缴费'},
      ],
      captureStateOptions:[{value:'已缴费'},{value:'未缴费'}],//缴费状态
      captureTypeOptions:[{value:'线上'},{value:'线下'}],//缴费渠道
      payTypeOptions:[{value:'支付宝'},{value:'微信'},{value:'现金'},{value:'其他'}],//支付方式
      member:{
        name:'',
        level:'',
        deadline:'',//缴费时间
        mustMoney:'',//应缴金额
        hasMoney:'',//已交金额
      },//弹窗的信息
      captureTime:'',//缴费时间
      captureState:'',//选中的缴费状态
      captureType:'',//缴费渠道
      payType:''//支付方式
      
		}
  },
  methods: {
    editor(){
      //对缴费用户进行编辑
      this.dialogVisible = true
    },
    handleClose(){
      //编辑弹窗关闭前的回调

    }
  },
}
</script>
<style lang='scss' scoped>
  .order{
	  .task-form-text{
				color: #666666;
			}
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .order .el-dialog__body{overflow: auto;}
</style>
